<template>
  <div :style="{ width: props.width, height: props.height }">
    <svg
      id="装饰2"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      :width="props.width"
      :height="props.height"
      viewBox="0 0 63 63"
      preserveAspectRatio="none meet"
    >
      <defs>
        <filter id="矩形备份_63">
          <feOffset dy="1" input="SourceAlpha" />
          <feGaussianBlur stdDeviation="4" result="blur" />
          <!-- <feFlood flood-color="#07beb8" flood-opacity="0.502" result="color" /> -->
          <feComposite operator="out" in="SourceGraphic" in2="blur" />
          <feComposite operator="in" in="color" />
          <feComposite operator="in" in2="SourceGraphic" />
        </filter>
      </defs>
      <g id="BG">
        <g data-type="innerShadowGroup">
          <g transform="matrix(1, 0, 0, 1, 0, 0)" filter="url(#矩形备份_63)">
            <rect
              id="矩形备份_63-2"
              data-name="矩形备份 63"
              width="63"
              height="63"
              fill="#fff"
            />
          </g>
          <g
            id="矩形备份_63-3"
            data-name="矩形备份 63"
            fill="none"
            :stroke="states.color"
            stroke-miterlimit="10"
            stroke-width="1"
          >
            <rect width="63" height="63" stroke="none" />
            <rect x="0.5" y="0.5" width="62" height="62" fill="none" />
          </g>
        </g>
        <g id="_4个角" data-name="4个角">
          <rect id="矩形" width="3.5" height="3.5" :fill="states.color2" />
          <rect
            id="矩形-2"
            data-name="矩形"
            width="3.5"
            height="3.5"
            transform="translate(59.5)"
            :fill="states.color2"
          />
          <rect
            id="矩形-3"
            data-name="矩形"
            width="3.5"
            height="3.5"
            transform="translate(0 59.5)"
            :fill="states.color2"
          />
          <rect
            id="矩形-4"
            data-name="矩形"
            width="3.5"
            height="3.5"
            transform="translate(59.5 59.5)"
            :fill="states.color2"
          />
        </g>
        <g id="网格" transform="translate(1 1)" opacity="0.149">
          <rect
            id="矩形备份_64"
            data-name="矩形备份 64"
            width="61"
            height="1.173"
            transform="translate(0 7.038)"
            :fill="states.color2"
          />
          <rect
            id="矩形备份_66"
            data-name="矩形备份 66"
            width="61"
            height="1.173"
            transform="translate(0 14.077)"
            :fill="states.color2"
          />
          <rect
            id="矩形备份_68"
            data-name="矩形备份 68"
            width="61"
            height="1.173"
            transform="translate(0 21.115)"
            :fill="states.color2"
          />
          <rect
            id="矩形备份_70"
            data-name="矩形备份 70"
            width="61"
            height="1.173"
            transform="translate(0 28.154)"
            :fill="states.color2"
          />
          <rect
            id="矩形备份_72"
            data-name="矩形备份 72"
            width="61"
            height="1.173"
            transform="translate(0 35.192)"
            :fill="states.color2"
          />
          <rect
            id="矩形备份_74"
            data-name="矩形备份 74"
            width="61"
            height="1.173"
            transform="translate(0 42.231)"
            :fill="states.color2"
          />
          <rect
            id="矩形备份_76"
            data-name="矩形备份 76"
            width="61"
            height="1.173"
            transform="translate(0 49.269)"
            :fill="states.color2"
          />
          <rect
            id="矩形备份_78"
            data-name="矩形备份 78"
            width="61"
            height="1.173"
            transform="translate(0 56.308)"
            :fill="states.color2"
          />
          <rect
            id="矩形-5"
            data-name="矩形"
            width="1.173"
            height="61"
            transform="translate(3.519)"
            :fill="states.color2"
          />
          <rect
            id="矩形备份_80"
            data-name="矩形备份 80"
            width="1.173"
            height="61"
            transform="translate(12.904)"
            :fill="states.color2"
          />
          <rect
            id="矩形备份_82"
            data-name="矩形备份 82"
            width="1.173"
            height="61"
            transform="translate(22.288)"
            :fill="states.color2"
          />
          <rect
            id="矩形备份_84"
            data-name="矩形备份 84"
            width="1.173"
            height="61"
            transform="translate(31.673)"
            :fill="states.color2"
          />
          <rect
            id="矩形备份_86"
            data-name="矩形备份 86"
            width="1.173"
            height="61"
            transform="translate(41.058)"
            :fill="states.color2"
          />
          <rect
            id="矩形备份_88"
            data-name="矩形备份 88"
            width="1.173"
            height="61"
            transform="translate(50.442)"
            :fill="states.color2"
          />
        </g>
      </g>
    </svg>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";

let props = defineProps({
  width: {
    type: String,
    default: "",
  },
  height: {
    type: String,
    default: "",
  },
  models: {
    type: Object,
    default: () => ({}),
  },
});
const states = computed({
  get: () => props.models,
  set: () => {},
}) as any;
</script>

<style scoped lang="scss"></style>
